<template>
	<view>
		<view class="order-details">
			<view class="header bg-color acea-row row-middle">
				<view class="pictrue">
					<image :src="orderInfo.statusPic"></image>
				</view>
				<view class="data">
					<view class="state">{{ orderInfo.pstatus.msg }}</view>
					<view>{{ orderInfo.createTime }}</view>
				</view>
			</view>
			<view>
				<view class="wrapper">
					<view class="name">
						{{ orderInfo.shippingType == 1 ? '付款门店' : '自提门店' }}：
						<text class="content">{{ orderInfo.shop ? orderInfo.shop.name : '' }}</text>
					</view>
					<view class="name">
						地址：
						<text class="content">{{ orderInfo.shop ? orderInfo.shop.address : '' }}</text>
					</view>
					<view class="name">
						电话：
						<text class="content phone"
							@tap="makePhone">{{ orderInfo.shop ? orderInfo.shop.telephone : '' }}</text>
						<text class="content phone" @click="visibleQrCode">查看门店二维码</text>
					</view>
					<view class="name">
						门店营业时间：
						<text class="content">{{ orderInfo.shop ? orderInfo.shop.dayTime : '' }}</text>
					</view>
				</view>
				<view class="wrapper">
					<view class="name">
						{{ orderInfo.shippingType == 1 ? '收件人：' : '提货人：' }}
						<text class="content">{{ orderInfo.realName }} {{ orderInfo.userPhone }}</text>
					</view>
					<view class="name" v-if="orderInfo.shippingType == 1">
						地址：
						<text class="content">{{ orderInfo.userAddress }}</text>
					</view>
				</view>
				<view class="writeOff" v-if="orderInfo.shippingType == 2 && orderInfo.paid && orderInfo.status!==3">
					<view class="title">提货信息：提货时请出示以下核销码
					</view>
					<view class="grayBg">
						<view class="pictrue">
							<image :src="codeImg"></image>
						</view>
					</view>
					<view class="gear">
						<image src="../../static/images/writeOff.jpg"></image>
					</view>
					<view class="num">{{ orderInfo.verifyCode }}</view>
					<view class="rules" v-if="orderInfo.systemStore">
						<view class="item">
							<view class="rulesTitle acea-row row-middle">
								<text class="iconfont icon-shijian"></text>
								核销时间
							</view>
							<view class="info">
								每日：
								<text class="time">{{ orderInfo.systemStore.dayTime }}</text>
							</view>
						</view>
						<view class="item">
							<view class="rulesTitle acea-row row-middle">
								<text class="iconfont icon-shuoming1"></text>
								使用说明
							</view>
							<view class="info">可将二维码出示给店员扫描或提供数字核销码</view>
						</view>
					</view>
				</view>
			</view>
			<view class="wrapper" v-if="orderInfo.deliveryType == 'express'">
				<view class="item acea-row row-between">
					<view>快递公司：</view>
					<view class="conter">{{ orderInfo.deliveryName || '' }}</view>
				</view>
				<view class="item acea-row row-between">
					<view>快递号：</view>
					<view class="conter">{{ orderInfo.deliveryId || '' }}</view>
				</view>
			</view>
			<orderGoods :evaluate="evaluate" :orderId="order_id" :ids="id" :uniId="uniId" :cartInfo="cartInfo"
				:jump="true"></orderGoods>
			<view class="wrapper">
				<view class="item acea-row row-between" v-if="orderInfo.userMarkPrice">
					<view>优惠：</view>
					<view class="conter">-￥{{ orderInfo.userMarkPrice }}</view>
				</view>
				<view class="item acea-row row-between">
					<view>应付金额：</view>
					<view class="conter">￥{{ orderInfo.totalPrice }}</view>
				</view>
				<view class="item acea-row row-between" v-if="orderInfo.useIntegral > 0">
					<view>积分抵扣：</view>
					<view class="conter">-￥{{ orderInfo.deductionPrice }}</view>
				</view>
				<view class="item acea-row row-between" v-if="orderInfo.payPostage > 0">
					<view>运费：</view>
					<view class="conter">￥{{ orderInfo.payPostage }}</view>
				</view>
				<view class="actualPay acea-row row-right">
					实付金额：
					<text class="money font-color">￥{{ orderInfo.payPrice }}</text>
				</view>
			</view>
			<div class="goodCall">
				<button open-type="contact" class="contact" hover-class="none">
					<span class="iconfont icon-kefu"></span>
					<span>联系客服</span>
				</button>
			</div>
			<view class="wrapper">
				<view class="item acea-row row-between">
					<view>订单编号：</view>
					<view class="conter acea-row row-middle row-right">
						{{ orderInfo.orderId }}
						<text class="copy" @tap="copy">复制</text>
					</view>
				</view>
				<view class="item acea-row row-between">
					<view>下单时间：</view>
					<view class="conter">{{ orderInfo.createTime || 0 }}</view>
				</view>
				<view class="item acea-row row-between">
					<view>支付状态：</view>
					<view class="conter" v-if="orderInfo.paid">已支付</view>
					<view class="conter" v-else>未支付</view>
				</view>
				<view class="item acea-row row-between">
					<view>支付方式：</view>
					<view class="conter">{{ orderInfo.pstatus.payType }}</view>
				</view>
				<view class="item acea-row row-between" v-if="orderInfo.mark">
					<view>买家留言：</view>
					<view class="conter">{{ orderInfo.mark }}</view>
				</view>
			</view>
			<view style="height:120rpx;"></view>
			<view class="footer acea-row row-right row-middle">
				<view class="qs-btn" v-if="status.type == 0" @click.stop="cancelOrder">取消订单</view>
				<view class="bnt bg-color" v-if="status.type == 2" @tap="confirmOrder">确认收货</view>
				<!-- <view class="bnt bg-color" v-if="status.type == 4" @tap="goOrderConfirm">再次购买</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOrderDetail,
		orderAgain,
		orderTake,
		orderDel,
		orderCancel,
		qrcodeApi
	} from '@/api/order.js';
	import {
		openOrderRefundSubscribe
	} from '@/utils/SubscribeMessage.js';
	import orderGoods from '@/components/orderGoods';
	import ClipboardJS from '@/plugin/clipboard/clipboard.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from 'vuex';
	import authorize from '@/components/Authorize';
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js';

	export default {
		components: {
			orderGoods,
			authorize
		},
		data() {
			return {
				codeImg: '',
				qrcodeSize: 100,
				order_id: '',
				evaluate: 0,
				cartInfo: [], //购物车产品
				orderInfo: {
					systemStore: {},
					pstatus: {}
				}, //订单详情
				system_store: {},
				isGoodsReturn: false, //是否为退款订单
				status: {}, //订单底部按钮状态
				isClose: false,
				payMode: [{
						name: '微信支付',
						icon: 'icon-weixinzhifu',
						value: 'weixin',
						title: '微信快捷支付'
					},
					{
						name: '余额支付',
						icon: 'icon-yuezhifu',
						value: 'yue',
						title: '可用余额:',
						number: 0
					}
				],
				pay_close: false,
				pay_order_id: '',
				totalPrice: '0',
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				id: 0, //订单id
				uniId: ''
			};
		},
		computed: mapGetters(['isLogin', 'chatUrl']),
		onLoad: function(options) {
			if (!options.order_id && !options.uniId)
				return this.$util.Tips({
					title: '缺少参数'
				}, {
					tab: 3,
					url: 1
				});
			this.$set(this, 'order_id', options.order_id);
			this.getOrderInfo();
		},
		methods: {
			/**
			 * 拨打电话
			 */
			makePhone: function() {
				uni.makePhoneCall({
					phoneNumber: this.orderInfo.shop.telephone
				});
			},
			visibleQrCode: function() {
				uni.previewImage({
					current: 0,
					urls: [this.orderInfo.shop.imageUrl]
				})
			},
			/**
			 * 获取订单详细信息
			 *
			 */
			getOrderInfo: function() {
				let that = this;
				uni.showLoading({
					title: '正在加载中'
				});
				getOrderDetail(that.order_id)
					.then(res => {
						uni.hideLoading();
						let _type = res.data.pstatus.type;
						that.$set(that, 'orderInfo', res.data);
						that.$set(that, 'evaluate', _type == 3 ? 3 : 0);
						that.$set(that, 'system_store', res.data.systemStore);
						that.$set(that, 'id', res.data.id);
						let cartInfo = res.data.cartInfo,
							newCartInfo = [];
						cartInfo.forEach((item, index) => {
							newCartInfo.push(item.info);
						});
						that.$set(that, 'cartInfo', newCartInfo);
						if (res.data.refundStatus != 0) {
							that.isGoodsReturn = true;
						}
						that.getOrderStatus();
						that.markCode(res.data.verifyCode);
					})
					.catch(err => {
						uni.hideLoading();
						that.$util.Tips({
								title: err
							},
							'/pages/users/order_list/index'
						);
					});
			},
			/**
			 *
			 * 生成二维码
			 */
			markCode(text) {
				qrcodeApi({
					height: '145',
					text: text,
					width: '145'
				}).then(res => {
					this.codeImg = res.data.code;
				});
			},
			/**
			 *
			 * 剪切订单号
			 */
			copy: function() {
				let that = this;
				uni.setClipboardData({
					data: this.orderInfo.orderId
				});
			},
			/**
			 * 设置底部按钮
			 *
			 */
			getOrderStatus: function() {
				let orderInfo = this.orderInfo || {},
					_status = orderInfo.pstatus || {
						type: 0
					},
					status = {};
				let type = parseInt(_status.type),
					delivery_type = orderInfo.deliveryType,
					seckill_id = orderInfo.seckillId ? parseInt(orderInfo.seckillId) : 0,
					bargain_id = orderInfo.bargainId ? parseInt(orderInfo.bargainId) : 0,
					combination_id = orderInfo.combinationId ? parseInt(orderInfo.combinationId) : 0;
				status = {
					type: type == 9 ? -9 : type,
					class_status: 0
				};
				if (type == 1 && combination_id > 0) status.class_status = 1; //查看拼团
				if (type == 2 && delivery_type == 'express') status.class_status = 2; //查看物流
				if (type == 2) status.class_status = 3; //确认收货
				if (type == 4 || type == 0) status.class_status = 4; //删除订单
				if (!seckill_id && !bargain_id && !combination_id && (type == 3 || type == 4)) status.class_status =
					5; //再次购买
				this.$set(this, 'status', status);
			},
			/**
			 * 再此购买
			 *
			 */
			goOrderConfirm: function() {
				let that = this;
				orderAgain(that.orderInfo.orderId)
					.then(res => {
						return uni.navigateTo({
							url: '/pages/order_confirm/index?cartId=' + res.data.cateId +
								'&again=true&new=true&addAgain=true'
						});
					})
					.catch(err => {
						return that.$util.Tips({
							title: err
						});
					});
			},
			confirmOrder: function() {
				let that = this;
				uni.showModal({
					title: '确认收货',
					content: '为保障权益，请收到货确认无误后，再确认收货',
					success: function(res) {
						if (res.confirm) {
							orderTake(that.id)
								.then(res => {
									return that.$util.Tips({
											title: '操作成功',
											icon: 'success'
										},
										function() {
											that.getOrderInfo();
										}
									);
								})
								.catch(err => {
									return that.$util.Tips({
										title: err
									});
								});
						}
					}
				});
			},
			/**
			 *
			 * 删除订单
			 */
			delOrder: function() {
				let that = this;
				orderDel(this.id)
					.then(res => {
						return that.$util.Tips({
							title: '删除成功',
							icon: 'success'
						}, {
							tab: 3,
							url: 1
						});
					})
					.catch(err => {
						return that.$util.Tips({
							title: err
						});
					});
			},
			cancelOrder() {
				let self = this;
				uni.showModal({
					title: '提示',
					content: '确认取消该订单?',
					success: function(res) {
						if (res.confirm) {
							orderCancel(self.orderInfo.id)
								.then(data => {
									self.$util.Tips({
										title: '取消成功'
									}, {
										tab: 3
									});
								})
								.catch(() => {
									self.$util.Tips({
										title: err
									});
									self.getDetail();
								});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.goodCall {
		color: #e93323;
		text-align: center;
		width: 100%;
		height: 86rpx;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 30rpx;
		line-height: 86rpx;
		background: #fff;

		.contact {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 86rpx;
			font-size: 30rpx;
			color: #e93323;
		}

		.icon-kefu {
			font-size: 36rpx;
			margin-right: 15rpx;
		}
	}

	.order-details .header {
		padding: 0 30rpx;
		height: 150rpx;
	}

	.order-details .header.on {
		background-color: #666 !important;
	}

	.order-details .header .pictrue {
		width: 110rpx;
		height: 110rpx;
	}

	.order-details .header .pictrue image {
		width: 100%;
		height: 100%;
	}

	.order-details .header .data {
		flex: 1;
		margin-left: 27rpx;
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.order-details .header .data.on {
		margin-left: 0;
	}

	.order-details .header .data .state {
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 7rpx;
	}

	.order-details .header .data .time {
		margin-left: 20rpx;
	}

	.order-details .nav {
		background-color: #fff;
		font-size: 26rpx;
		color: #282828;
		padding: 25rpx 0;
	}

	.order-details .nav .navCon {
		padding: 0 40rpx;
	}

	.order-details .nav .on {
		color: #e93323;
	}

	.order-details .nav .progress {
		padding: 0 65rpx;
		margin-top: 10rpx;
	}

	.order-details .nav .progress .line {
		width: 100rpx;
		height: 2rpx;
		background-color: #939390;
	}

	.order-details .nav .progress .iconfont {
		font-size: 25rpx;
		color: #939390;
		margin-top: -2rpx;
	}

	.order-details .wrapper {
		font-size: 26rpx;
		color: #868686;
		background-color: #fff;
		margin-top: 13rpx;
		padding: 35rpx 30rpx;
	}

	.order-details .wrapper .name {
		font-size: 28rpx;
		color: #282828;
		margin-bottom: 15rpx;
	}

	.order-details .wrapper .name .phone {
		margin-right: 20rpx;
		color: #2196f3;
	}

	.order-details .line {
		width: 100%;
		height: 3rpx;
	}

	.order-details .line image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.order-details .wrapper {
		background-color: #fff;
		margin-top: 12rpx;
		padding: 30rpx;
	}

	.order-details .wrapper .item {
		font-size: 28rpx;
		color: #282828;
	}

	.order-details .wrapper .item~.item {
		margin-top: 20rpx;
	}

	.order-details .wrapper .item .conter {
		flex: 1;
		width: 460rpx;
		text-align: right;
		color: #868686;
	}

	.order-details .wrapper .item .conter .copy {
		font-size: 20rpx;
		color: #333;
		border-radius: 3rpx;
		border: 1rpx solid #666;
		padding: 3rpx 15rpx;
		margin-left: 24rpx;
	}

	.order-details .wrapper .actualPay {
		border-top: 1rpx solid #eee;
		margin-top: 30rpx;
		padding-top: 30rpx;
	}

	.order-details .wrapper .actualPay .money {
		font-weight: bold;
		font-size: 30rpx;
	}

	.order-details .footer {
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.order-details .footer .bnt {
		width: 176rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 50rpx;
		color: #fff;
		font-size: 27rpx;
	}

	.order-details .footer .qs-btn {
		width: auto;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 50rpx;
		color: #fff;
		font-size: 27rpx;
		padding: 0 3%;
		color: #aaa;
		border: 1px solid #ddd;
		margin-right: 20rpx;
	}

	.order-details .footer .bnt.cancel {
		color: #aaa;
		border: 1rpx solid #ddd;
	}

	.order-details .footer .bnt~.bnt {
		margin-left: 18rpx;
	}

	.order-details .writeOff {
		background-color: #fff;
		margin-top: 13rpx;
		padding-bottom: 30rpx;
	}

	.order-details .writeOff .title {
		font-size: 30rpx;
		color: #282828;
		height: 87rpx;
		border-bottom: 1px solid #f0f0f0;
		padding: 0 30rpx;
		line-height: 87rpx;
	}

	.order-details .writeOff .grayBg {
		background-color: #f2f5f7;
		width: 590rpx;
		height: 384rpx;
		border-radius: 20rpx 20rpx 0 0;
		margin: 50rpx auto 0 auto;
		padding-top: 55rpx;
	}

	.order-details .writeOff .grayBg .pictrue {
		width: 290rpx;
		height: 290rpx;
		margin: 0 auto;
	}

	.order-details .writeOff .grayBg .pictrue image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.order-details .writeOff .gear {
		width: 590rpx;
		height: 30rpx;
		margin: 0 auto;
	}

	.order-details .writeOff .gear image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.order-details .writeOff .num {
		background-color: #f0c34c;
		width: 590rpx;
		height: 84rpx;
		color: #282828;
		font-size: 48rpx;
		margin: 0 auto;
		border-radius: 0 0 20rpx 20rpx;
		text-align: center;
		padding-top: 4rpx;
	}

	.order-details .writeOff .rules {
		margin: 46rpx 30rpx 0 30rpx;
		border-top: 1px solid #f0f0f0;
		padding-top: 10rpx;
	}

	.order-details .writeOff .rules .item {
		margin-top: 20rpx;
	}

	.order-details .writeOff .rules .item .rulesTitle {
		font-size: 28rpx;
		color: #282828;
	}

	.order-details .writeOff .rules .item .rulesTitle .iconfont {
		font-size: 30rpx;
		color: #333;
		margin-right: 8rpx;
		margin-top: 5rpx;
	}

	.order-details .writeOff .rules .item .info {
		font-size: 28rpx;
		color: #999;
		margin-top: 7rpx;
	}

	.order-details .writeOff .rules .item .info .time {
		margin-left: 20rpx;
	}

	.order-details .map {
		height: 86rpx;
		font-size: 30rpx;
		color: #282828;
		line-height: 86rpx;
		border-bottom: 1px solid #f0f0f0;
		margin-top: 13rpx;
		background-color: #fff;
		padding: 0 30rpx;
	}

	.order-details .map .place {
		font-size: 26rpx;
		width: 176rpx;
		height: 50rpx;
		border-radius: 25rpx;
		line-height: 50rpx;
		text-align: center;
	}

	.order-details .map .place .iconfont {
		font-size: 27rpx;
		height: 27rpx;
		line-height: 27rpx;
		margin: 2rpx 3rpx 0 0;
	}

	.order-details .wrapper .name .iconfont {
		font-size: 34rpx;
		margin-left: 10rpx;
	}

	.refund {
		padding: 0 30rpx 30rpx;
		margin-top: 24rpx;
		background-color: #fff;

		.title {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: #333;
			height: 86rpx;
			border-bottom: 1px solid #f5f5f5;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}

		.con {
			padding-top: 25rpx;
			font-size: 28rpx;
			color: #868686;
		}
	}
</style>
